<script setup lang="ts">
	import { ref, reactive,getCurrentInstance } from "vue";
	import {sexList,isIllnessList} from '@/utlis/common.js'
	import {
		onShow,
		onHide,
		onLoad,
		onBackPress
	} from '@dcloudio/uni-app'
	const {proxy} = getCurrentInstance()
	import {
		userStore
	} from '@/pinia';
	const userStoreInfo = userStore();
	
	
	
	const state = reactive({
		initData:{
			id:'',
			username:'',
			memberId:'',
			headImage:'',
			phone:'',
			sex:null,
			workeAge:'',
			jobId:'',
			proficiency:'',
			serviceStarRating:'',
			
		},
		info:{},
		sex:sexList,
		isIllness:isIllnessList,
		type:"",
		pickerShow:false,
		keyName:'text',
		pickerList:[],
		workeAge:[],
	})
	
	
	// const info = ref({})
	
	const fileList = ref([])
	
	let avatarClick = () => {
		uni.chooseImage({
			success: (chooseImageRes) => {
				const tempFilePaths = chooseImageRes.tempFilePaths;
				uni.uploadFile({
					url: proxy.$uploadUrl + proxy.$api.uploadFile,
					filePath: tempFilePaths[0],
					name: 'file',
					formData: {
						'file': tempFilePaths[0],
					},
					success: (uploadFileRes) => {
						console.log(JSON.parse(uploadFileRes.data).result);
						state.info.headImage = JSON.parse(uploadFileRes.data).result;
			
					}
				});
			}
		});
	}
	
	let idCardClick = (type) => {
			uni.chooseImage({
				success: (chooseImageRes) => {
					const tempFilePaths = chooseImageRes.tempFilePaths;
					uni.uploadFile({
						url: proxy.$uploadUrl + proxy.$api.uploadFile,
						filePath: tempFilePaths[0],
						name: 'file',
						formData: {
							'file': tempFilePaths[0],
						},
						success: (uploadFileRes) => {
							console.log(JSON.parse(uploadFileRes.data).result);
							state.info[type] = JSON.parse(uploadFileRes.data).result;
				
						}
					});
				}
			});
		}
	


	const showList = (e) => {
		state.type = e;
		state.pickerList = state[e]
		state.pickerShow = true
		
	}
	
	const setText = (val,key)=>{
		let arr = state[key]
		let idx = arr.findIndex(el=>el.value === val)
		let text = ''
		if(idx!=-1){
			text = arr[idx].name
		}else{
			text = ''
		}
		return text
	}
	
	let pickerConfirm = (e) => {
		console.log(e,'pickerConfirm')
		state.info[state.type] = e.value
		state.pickerShow = false
		state.pickerList = state[e]
	}
	

	// 删除图片
	const deletePic = (event) => {
		fileList.value.splice(event.index, 1);
	};

	// 新增图片
	
	const afterRead = (e) => {	
		const item = e.file[0];
		fileList.value.push({
			...item,
			//提示上传中
			status: 'uploading',
			message: '上传中'
		});
		uni.uploadFile({
			url: proxy.$uploadUrl + proxy.$api.uploadFile,
			filePath: e.file[0].url,
			name: 'file',
			formData: {
				file: e.file[0].url,
			},
			success: (uploadFileRes) => {
				// console.log(uploadFileRes);
				let result = JSON.parse(uploadFileRes.data).result
				let idx = fileList.value.length-1
				fileList.value.splice(
					idx,
					1,
					Object.assign(item, {
						status: 'success',
						message: '上传成功',
						url: result,
					})
				);
			},
			complete() { }
		});
	}

	const showTotal = ()=>{
		let arr = [
			{key:'username',desc:'请输入姓名'},
			{key:'phone',desc:'请输入手机号'},
			{key:'sex',desc:'请选择性别'},
			{key:'workeAge',desc:'请输入工龄'},
			{key:'jobId',desc:'请选择职位'},
			{key:'proficiency',desc:'请输入精通内容'},
			{key:'serviceStarRating',desc:'请输入服务星级'},
			{key:'isIllness',desc:'请选择有无传染病'},
			{key:'idCard',desc:'请输入身份证号'},
			{key:'bankAccount',desc:'请输入银行卡号'},
			{key:'bank',desc:'请输入开户行'},
			{key:'address',desc:'请输入现住地址'},
			{key:'dailyFee',desc:'请输入按日收费'},
			{key:'hourFee',desc:'请输入按小时收费'},	
		]
		for (let i = 0; i < arr.length; i++) {
			if (state.info[arr[i].key] == undefined || state.info[arr[i].key] === null || state.info[arr[i].key] === '') {
				uni.showToast({
				  title: arr[i].desc,
				  icon: 'none'
				});
				return false;
			}
		}
		return true
		
	}
	
	// 获取详情
	const meiyeShortWorkers3QueryByIdFun = ()=>{
		fileList.value = []
		proxy.$req('GET', proxy.$api.meiyeShortWorkers3QueryById).then((res) => {
			if(res.code === 200){
				if(res.result && res.result.industryCertificate){
					let imgs = res.result.industryCertificate.split(',')
					imgs.forEach(el=>{
						fileList.value.push({url:el})
					})
				}
				if(res.result && res.result.idCardFront){
					let idcard1 = res.result.idCardFront.split(',')
					idcard1.forEach(el=>{
						fileImg.value.fileList1.push({url:el})
					})
				}
				if(res.result && res.result.reverseSideOfIdCard){
					let idcard2 = res.result.reverseSideOfIdCard.split(',')
					idcard2.forEach(el=>{
						fileImg.value.fileList2.push({url:el})
					})
				}

				state.info = res.result || {}
				getJobName()
				
			}
		})
	}
	const submit = ()=>{
		let imgArr = []
		if(fileList.value.length>0){
			fileList.value.forEach(el=>{
				imgArr.push(el.url)
			})
			console.log(fileList.value,'fileList.value')
		}
		state.info.industryCertificate = imgArr.length>0?imgArr.join(','):''
		state.info.memberId = userStoreInfo.userInfo.id
		
		state.info.idCardFront = fileImg.value.fileList1.length>0?fileImg.value.fileList1[0].url:''
		state.info.reverseSideOfIdCard = fileImg.value.fileList2.length>0?fileImg.value.fileList2[0].url:''
		
		let ajaxUrl = proxy.$api.meiyeShortWorkersAdd
		if(state.info.id){
			ajaxUrl =  proxy.$api.meiyeShortWorkers3Edit
		}
		
		// return
		console.log(showTotal())
		if(showTotal()){
			proxy.$req('POST',ajaxUrl,state.info).then((res) => {
				if(res.code === 200){
					uni.switchTab({
						url:'/pages/mine/mine'
					})
					// router.back()
				}else{
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
				}
			})
		}
		
	}
	
	let fileImg = ref({
		fileList1: [],
		fileList2: [],
	})
	const afterIdCardRead = (e, type) => {
		const item = e.file[0];
		fileImg.value[`fileList${type}`].push({
			...item,
			//提示上传中
			status: 'uploading',
			message: '上传中'
		});
		uni.uploadFile({
			url: proxy.$uploadUrl + proxy.$api.uploadFile,
			filePath: e.file[0].url,
			name: 'file',
			formData: {
				file: e.file[0].url,
			},
			success: (uploadFileRes) => {
				// console.log(uploadFileRes);
				let result = JSON.parse(uploadFileRes.data).result
				fileImg.value[`fileList${type}`].splice(
					0,
					1,
					Object.assign(item, {
						status: 'success',
						message: '上传成功',
						url: result,
					})
				);
			},
			complete() { }
		});
	}
	const deleteIdCardPic = (e, type) => {
		fileImg.value[`fileList${type}`] = []
	}
	
	let addressThree = ref([])
	const addressChecked = (e) => {
		//选择地址
		console.log(e);
		
		addressThree.value = e.detail.value
		state.info.provinceId = addressThree.value[0].value
		state.info.cityId = addressThree.value[1].value
		state.info.areaId = addressThree.value[2].value
		
		
		state.info.nativePlace = e.detail.value[0].text + e.detail.value[1].text + e.detail.value[2].text
	}
	let city = ref([])
	const getAddressTree = () => {
		//获取地区
		proxy.$req('GET', proxy.$api.getAddressTree, {}).then((res) => {
			city.value = res.result
		})
	}
	let showPopup = ref(false)
	let jobList = ref([])
	const getJobListFun = () => {
		//获取岗位
		// proxy.$req('GET', proxy.$api.getJobList).then((res) => {
		// 	jobList.value = res.result.records
		// 	console.log(jobList.value,'jobList.value')
		// })
		proxy.$req('GET', proxy.$api.meiyeRecruitCategoryCommonJobList).then((res) => {
			jobList.value = res.result
			console.log(jobList.value,'jobList.value')
			meiyeShortWorkers3QueryByIdFun()
		})
	}
	const selectJob = ()=>{
		showPopup.value = true
		
	}
	const radioChange = (n) => {
		state.info.jobId = n;
		console.log('radioChange', n);
	};
	const close = ()=>{
		showPopup.value = false
	}
	const getJobName = ()=>{
		let idx = jobList.value.findIndex(el=>el.id == state.info.jobId)
		if(idx!=-1){
			state.info.jobName = jobList.value[idx].name
		}else{
			state.info.jobName = ''
		}
	}
	const checkJob = ()=>{
		getJobName()
		showPopup.value = false
	}
	onLoad(()=>{
		getAddressTree()
		getJobListFun()
		
	})
</script>

<template>
	<u-navbar class="navbar" bgColor="rgb(255, 255, 255)" :placeholder="true" title="" :autoBack="true">
		<template #center>
			<view style="font-weight: 400; font-size: 36rpx;">成为短时工</view>
		</template>
	</u-navbar>
	<view class="avatar">
		<image @click="avatarClick" :src="state.info.headImage" mode=""></image>
		<text class="editTitle" @click="avatarClick">上传个人照片</text>
	</view>
	<view class="main">
		<view class="card">
			<view class="function">
				<text class="title">
					<sapn class="red">*</sapn>姓名
				</text>
				<view class="funcItem">
					<u--input placeholder="请输入姓名" border="0" v-model="state.info.username" inputAlign="right"></u--input>
				</view>
			</view>

			<view class="function">
				<text class="title">
					<sapn class="red">*</sapn>联系方式
				</text>
				<view class="funcItem">
					<u--input placeholder="请输入手机号" border="0" v-model="state.info.phone" inputAlign="right"></u--input>
				</view>
			</view>

			<view class="function" @click="showList('sex')">
				<text class="title">
					<sapn class="red">*</sapn>性别
				</text>
				<view class="funcItem">
					<text>{{setText(state.info.sex,'sex')}}</text>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>

			<view class="function">
				<text class="title">
					<sapn class="red">*</sapn>工龄
				</text>
				<u--input placeholder="请输入" border="0" v-model="state.info.workeAge" inputAlign="right"></u--input>
			</view>
			
			<view class="function" @click="selectJob">
				<text class="title">
					<sapn class="red">*</sapn>职业
				</text>
				<view class="funcItem">
					<text>{{state.info.jobName}}</text>
					<u-icon name="arrow-right"></u-icon>
				</view>
				<!-- <u--input placeholder="请输入" border="0"  v-model="state.info.jobId" inputAlign="right"></u--input> -->
				<!-- <view class="funcItem">
					<text>{{state.info.jobName}}</text>
					<u-icon name="arrow-right"></u-icon>
				</view> -->
			</view>
			
			<view class="function">
				<text class="title">
					<sapn class="red">*</sapn>精通
				</text>
				<view class="funcItem">
					<u--input placeholder="请输入" border="0" v-model="state.info.proficiency" inputAlign="right"></u--input>
				</view>
			</view>
			
			<view class="function">
				<text class="title">
					<sapn class="red">*</sapn>服务星级
				</text>
				<view class="funcItem">
					<u-rate count="5" v-model="state.info.serviceStarRating"></u-rate>
					<!-- <u--input placeholder="请输入" border="0" v-model="state.info.serviceStarRating" inputAlign="right"></u--input> -->
			<!-- 		<text>{{state.info.serviceStarRating}}</text>
					<u-icon name="arrow-right"></u-icon> -->
				</view>
			</view>
			
			<view class="function" @click="showList('isIllness')">
				<text class="title">
					<sapn class="red">*</sapn>有无传染病
				</text>
				<view class="funcItem">
					<text>{{setText(state.info.isIllness,'isIllness')}}</text>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
			<view class="function">
				<text class="title">
					<sapn class="red">*</sapn>身份证号
				</text>
				<view class="funcItem">
					<u--input placeholder="请输入" border="0" v-model="state.info.idCard" inputAlign="right"></u--input>
				</view>
			</view>
			<view class="function">
				<text class="title">
					<sapn class="red">*</sapn>银行卡号
				</text>
				<view class="funcItem">
					<u--input placeholder="请输入" border="0" v-model="state.info.bankAccount" inputAlign="right"></u--input>
				</view>
			</view>
			<view class="function">
				<text class="title">
					<sapn class="red">*</sapn>开户行
				</text>
				<view class="funcItem">
					<u--input placeholder="请输入" border="0" v-model="state.info.bank	" inputAlign="right"></u--input>
				</view>
			</view>
			<view class="function">
				<text class="title">
					<sapn class="red">*</sapn>现住地址
				</text>
				<view class="funcItem">
			<!-- 		<uni-data-picker class="input" v-model="state.info.address" :localdata="city" popup-title="请选择" :map="{
						text:'name',
						value:'id',
					}" @change="addressChecked">
						<view :style="{color:state.info.address?'#333':'rgba(0,0,0,0.25)',textAlign:'right',paddingRight:'18rpx'}">
							{{state.info.address?state.info.address:'请选择' }}
						</view>
					</uni-data-picker> -->
					<u--input placeholder="请输入" border="0" v-model="state.info.address" inputAlign="right"></u--input>
					<!-- <text>{{state.info.address}}</text>
					<u-icon name="arrow-right"></u-icon> -->
				</view>
			</view>
			
			<view class="function">
				<text class="title">
					籍贯
				</text>
				<view class="funcItem">
					<uni-data-picker class="input" v-model="state.info.nativePlace" :localdata="city" popup-title="请选择" :map="{
						text:'name',
						value:'id',
					}" @change="addressChecked">
						<view :style="{color:state.info.nativePlace?'#333':'rgba(0,0,0,0.25)',textAlign:'right',paddingRight:'18rpx'}">
							{{state.info.nativePlace?state.info.nativePlace:'请选择' }}
						</view>
					</uni-data-picker>
					<!-- <u--input placeholder="请输入" border="0" v-model="state.info.nativePlace" inputAlign="right"></u--input> -->
				</view>
			</view>
			
			
			
		</view>
		<view class="title">
			收费标准
		</view>
		
		<view class="card">
			<view class="function">
				<text class="title">
					<sapn class="red">*</sapn>按日收费
				</text>
				<view class="funcItem">
					<u--input placeholder="元/日" border="0" v-model="state.info.dailyFee" inputAlign="right"></u--input>
				</view>
			</view>
			<view class="function">
				<text class="title">
					<sapn class="red">*</sapn>按小时收费
				</text>
				<view class="funcItem">
					<u--input placeholder="元/小时" border="0" v-model="state.info.hourFee" inputAlign="right"></u--input>
				</view>
			</view>
		</view>

		
		<view class="card">
			<view class="function" style="flex-direction: column;align-items: flex-start;">
				<text class="title">行业证书（最多9张）</text>
				<view>
					<u-upload :fileList="fileList" @afterRead="afterRead" @delete="deletePic" multiple :maxCount="9"
						:previewFullImage="true"></u-upload>
				</view>
			</view>
		</view>
		<view class="card">
			<view class="function" style="flex-direction: column;align-items: flex-start;">
				<text class="title">身份证</text>
				<view class="idCard">
					<view class="c-flex-center-center">
						<u-upload :fileList="fileImg.fileList1" @afterRead="afterIdCardRead($event,1)"
							@delete="deleteIdCardPic($event,1)" name="1" multiple :maxCount="1" width="80" height="80">
						</u-upload>
						<text style="margin-top: 10rpx;">人像面</text>
					</view>
					<view class="c-flex-center-center">
						<u-upload :fileList="fileImg.fileList2" @afterRead="afterIdCardRead($event,2)"
							@delete="deleteIdCardPic($event,2)" name="2" multiple :maxCount="1" width="80" height="80">
						</u-upload>
						<text style="margin-top: 10rpx;">国徽面</text>
					</view>
					<!-- <view class="idCardItem">
						<image @click="idCardClick('idCardFront')" :src="state.info.idCardFront" mode=""></image>
						<text class="editTitle" @click="idCardClick('idCardFront')">上传人像面</text>
					</view>
					<view class="idCardItem">
						<image @click="idCardClick('reverseSideOfIdCard')" :src="state.info.reverseSideOfIdCard" mode=""></image>
						<text class="editTitle" @click="idCardClick('reverseSideOfIdCard')">上传国徽面</text>
					</view> -->
				</view>
				
				<!-- <view>
					<u-upload :fileList="fileList" @afterRead="afterRead" @delete="deletePic" multiple :maxCount="1"
						:previewFullImage="true"></u-upload>
					<u-upload :fileList="fileList" @afterRead="afterRead" @delete="deletePic" multiple :maxCount="1"
						:previewFullImage="true"></u-upload>
				</view> -->
			</view>
		</view>


		<view class="subBtn">
			<view class="btn" @click="submit">
				确定
			</view>
		</view>
	<!-- 	<u-picker :show="state.pickerShow" :columns="state.pickerList" :keyName="state.keyName" @cancel="state.pickerShow=false"
			@confirm="pickerConfirm"></u-picker> -->
		
		<u-action-sheet
			:show="state.pickerShow"
			:actions="state.pickerList"
			title="请选择"
			@close="state.pickerShow=false"
			@select="pickerConfirm">
		</u-action-sheet>
		
		<u-popup :show="showPopup" :round="10" @close="close">
			<view class="popupMain">
				<view class="title">
					<text>请选择</text>
					<text @click="checkJob">确认</text>
				</view>
				<view class="jobListBox">
					<u-radio-group placement="column">
					    <u-radio
							:customStyle="{marginBottom: '18px'}"
							v-for="item in jobList"
							:key="item.id"
							:label="item.name"
							:name="item.id"
							@change="radioChange"
					    >
					    </u-radio>
					</u-radio-group>
				</view>
				
			</view>
			
		</u-popup>
	</view>
</template>

<style lang="scss" scoped>
	page {
		background-color: #F2F2F2;
	}

	.red {
		color: red;
	}

	.main {
		width: 100%;
		margin: 0rpx auto;
	
		box-sizing: border-box;
		padding:0rpx 30rpx 30px;
		
		.card{
			background:#fff;
			box-sizing: border-box;
			border: 2rpx solid #fff;
			margin: 30rpx auto;
			padding: 24rpx;
			background:#fff;
			border-radius: 24rpx;
			box-shadow: 8rpx 8rpx 32rpx 0rpx rgba(0, 0, 0, 0.04);
		}

		.title {
			font-size: 26rpx;
			color: #000;
			margin: 40rpx 20rpx 20rpx;
		}

		.subBtn {
			width: 100%;
			margin: 20rpx auto;
			text-align: center;
			display: flex;
			justify-content: center;

			.btn {
				width: 620rpx;
				height: 100rpx;
				line-height: 100rpx;
				background-color: #cc645e;
				color: #fff;
				border-radius: 48rpx;
			}
		}
	}

	.function {
		padding: 0;
		box-sizing: border-box;
		background-color: #fff;
		margin: 2rpx auto;
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.title {
			font-size: 28rpx;
			font-weight: 400;
		}

		.funcItem {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			width: 60%;
		
			text {
				margin-right: 10rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: rgba(0, 0, 0, 0.85);
			}
		}
	}

	.avatar {
		padding: 30rpx 30rpx;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;

		.editTitle {
			margin-top: 10rpx;
			font-size: 28rpx;
			font-weight: 400;
			color: rgba(0, 0, 0, 0.45);
		}

		image {
			width: 130rpx;
			height: 130rpx;
			border-radius: 100rpx;
			border:2rpx solid #fff;
		}
	}
	
	.popupMain{
		padding:20rpx;
		.title{
			padding:20rpx 18rpx;
			text-align:center;
			margin:0;
			position:relative;
			text:last-child{
				position:absolute;
				right:10rpx;
				color:#2979ff;
				padding:0 10rpx;
			}
		}
		.jobListBox{
			height:1000rpx;
			overflow-y: auto;
		}
	}
	
	.idCard{
		display:flex;
		.idCardItem{
			display:flex;
			flex-direction: column;
			align-items: center;
			
			image{
				background-color: #f4f5f7;
				width:176rpx;
				height:176rpx;
				margin-right:24rpx;
			}
		}
	}
</style>